<template>
  <div id="key-customer-policies">
    <div class="card">
      <div class="card-header bg-info text-white">机票私有政策</div>
      <div class="card-body">
        <form class="row row-cols-lg-auto align-items-center">
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              v-model.trim="carrier0"
              size="10"
            />
          </div>
          <div class="col-1">
            <input
              type="textfield"
              class="form-control"
              placeholder="舱位"
              v-model.trim="subclass0"
              size="6"
            />
          </div>
          <label>状态</label>
          <div class="col-1">
            <select class="form-select" v-model.number="status0">
              <option value="-1">全部状态</option>
              <option value="0">停用</option>
              <option value="1">启用</option>
            </select>
          </div>
          <div class="col-1">
            <select class="form-select" v-model.number="sc.pageSize">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
            </select>
          </div>
          <label>排序</label>
          <div class="col-1">
            <select class="form-select" v-model.number="orderBy">
              <option value="0">默认</option>
              <option value="1">失效日期(降序)</option>
              <option value="4">失效日期(升序)</option>
              <option value="2">生效日期(降序)</option>
              <option value="8">生效日期(升序)</option>
            </select>
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-2"
              @click.stop="resetSearch()"
            >
              重置
            </button>

            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('8L')"
              >8L</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('CA')"
              >CA</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('CZ')"
              >CZ</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('FM')"
              >FM</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('HO')"
              >HO</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('HU')"
              >HU</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('MU')"
              >MU</a
            >
            <a
              class="ms-2"
              href="javascript:void(0)"
              @click.stop="quickSearch('ZH')"
              >ZH</a
            >

            <button
              type="button"
              class="btn btn-primary float-end ms-5"
              @click.stop="newPolicy()"
            >
              新建
            </button>
          </div>
        </form>
      </div>

      <table class="table table-striped table-hover" v-if="inputing">
        <thead>
          <tr>
            <th class="">政策编号</th>
            <th class="">航司</th>
            <th class="">舱位列表</th>
            <th class="">大客户代码</th>
            <th class="">PAT用大客户代码</th>
            <th class="">白名单</th>
            <th class="">外部备注</th>
            <th class="">内部备注</th>
            <th class="bg-success">生效日期</th>
            <th class="bg-warning">失效日期</th>
            <th class="">状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input
                type="text"
                class="form-control"
                v-model="policyCode"
                size="10"
              />
            </td>
            <td>
              <input
                type="text"
                class="form-control"
                v-model="carrier"
                size="5"
              />
            </td>
            <td>
              <input
                type="text"
                class="form-control"
                v-model="subclasses"
                size="10"
              />
            </td>
            <td>
              <input
                type="text"
                class="form-control"
                v-model="rawKeyCustomerCode"
                size="10"
              />
            </td>
            
            <td>
              <input
                type="text"
                class="form-control"
                v-model="keyCustomerCode"
                size="10"
              />
            </td>
            <td>
              <select class="form-select" v-model.number="whiteList">
                <option value="-1">未知</option>
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </td>
            <td>
              <input
                type="text"
                class="text-center form-control"
                v-model="publicMemo"
                size="10"
              />
            </td>
            <td>
              <input
                type="text"
                class="text-center form-control"
                v-model="privateMemo"
                size="10"
              />
            </td>
            <td>
              <my-date-picker
                id="effectDate"
                v-model="effectDate"
                placeholder="格式：yyyy-MM-dd"
              ></my-date-picker>
            </td>
            <td>
              <my-date-picker
                id="expireDate"
                v-model="expireDate"
                placeholder="格式：yyyy-MM-dd"
              ></my-date-picker>
            </td>
            <td>
              <select class="form-select" v-model.number="status">
                <option value="0">停用</option>
                <option value="1">启用</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="form-check" v-if="id === 0">
                <input
                  type="checkbox"
                  class="form-check-input"
                  v-model="keepInputing"
                />
                <label class="form-check-label">继续录入</label>
              </div>
            </td>
            <td colspan="6">
              <button
                type="button"
                class="btn btn-primary"
                v-on:click="savePolicy()"
              >
                保存
              </button>
              <button
                type="button"
                class="btn btn-secondary btn-sm ms-5"
                v-on:click="closeInput()"
              >
                关闭
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <table class="table table-hover table-sm table-info">
        <thead>
          <tr class="bg-white">
            <th class="text-center">政策编号</th>
            <th class="text-center">航司</th>
            <th class="text-center">舱位列表</th>
            <th class="text-center">PAT用大客户代码</th>
            <th class="text-center">大客户代码</th>
            <th class="text-center">白名单</th>
            <th class="text-center">外部备注</th>
            <th class="text-center">内部备注</th>
            <th class="text-center bg-success">生效日期</th>
            <th class="text-center bg-warning">失效日期</th>
            <th class="text-center">生成时间</th>
            <th class="text-center">修改时间</th>
            <th class="text-center">状态</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(info, index) in dataList" :key="index">
            <td class="text-center">
              {{ info.policyCode }}
            </td>
            <td class="text-center">{{ info.carrier }}</td>
            <td class="text-center">{{ info.subclasses }}</td>
            <td>
              {{ info.keyCustomerCode }}
            </td>
            <td>
              {{ info.rawKeyCustomerCode }}
            </td>
            <td class="text-center">
              <span v-if="info.whiteList === 0">不需要</span>
              <span v-else-if="info.whiteList === 1">需要</span>
              <span v-else>?</span>
            </td>
            <td class="text-center">{{ info.publicMemo }}</td>
            <td class="text-center">{{ info.privateMemo }}</td>
            <td class="text-center">{{ info.effectDate }}</td>
            <td class="text-center">{{ info.expireDate }}</td>
            <td class="text-center">{{ info.createTime }}</td>
            <td class="text-center">{{ info.lastUpdate }}</td>
            <td class="text-center">{{ showStatus(info.status) }}</td>

            <td>
              <a href="javascript:void(0)" v-on:click="editPolicy(index)"
                >修改</a
              >
            </td>
          </tr>
        </tbody>
      </table>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </div>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import $ from "jquery";
import {
  searchKeyCustomerPolicies,
  saveKeyCustomerPolicy,
} from "@/api/basic-data";

export default {
  components: {
    MyPagination,
    MyDatePicker,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      carrier0: "",
      subclass0: "",
      status0: -1,
      orderBy: 0,

      id: 0,
      policyCode: "",
      carrier: "",
      subclasses: "",
      keyCustomerCode: "",
      rawKeyCustomerCode: "",
      whiteList: -1,
      publicMemo: "",
      privateMemo: "",
      effectDate: "",
      expireDate: "",
      status: 1,

      dataList: [],

      keepInputing: false,
      inputing: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.search();
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
        "sc.subclass": this.subclass0,
        "sc.status": this.status0,
        "sc.orderBy": this.orderBy,
      };
      searchKeyCustomerPolicies(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    reset: function () {
      this.id = 0;
      this.policyCode = "";
      this.carrier = "";
      this.subclasses = "";
      this.keyCustomerCode = "";
      this.rawKeyCustomerCode = "";
      this.whiteList = -1;
      this.publicMemo = "";
      this.privateMemo = "";
      this.effectDate = "";
      this.expireDate = "";
      this.status = 1;
    },
    newPolicy: function () {
      this.reset();
      this.inputing = true;
    },
    editPolicy: function (index) {
      const info = this.dataList[index];

      this.id = info.id;
      this.policyCode = info.policyCode;
      this.carrier = info.carrier;
      this.subclasses = info.subclasses;
      this.publicMemo = info.publicMemo;
      this.privateMemo = info.privateMemo;
      this.keyCustomerCode = info.keyCustomerCode;
      this.rawKeyCustomerCode = info.rawKeyCustomerCode;
      this.whiteList = info.whiteList;
      this.effectDate = info.effectDate;
      this.expireDate = info.expireDate;
      this.status = info.status;

      this.keepInputing = false;

      this.inputing = true;
    },
    closeInput: function () {
      this.inputing = false;
    },
    savePolicy: function () {
      const params = {
        id: this.id,
        policyCode: this.policyCode,
        carrier: this.carrier,
        subclasses: this.subclasses,
        keyCustomerCode: this.keyCustomerCode,
        rawKeyCustomerCode: this.rawKeyCustomerCode,
        whiteList: this.whiteList,
        publicMemo: this.publicMemo,
        privateMemo: this.privateMemo,
        effectDate: this.effectDate,
        expireDate: this.expireDate,
        status: this.status,
      };

      saveKeyCustomerPolicy(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          if (this.keepInputing === false) {
            // $('#modalNew').modal('hide')
            this.inputing = false;
          }
          this.carrier0 = this.carrier;
          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(jsonResult.errmsg);
        }
      });
    },
    showStatus: function (status) {
      if (status == 0) {
        return "停用";
      } else if (status === 1) {
        return "启用";
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";
      this.status0 = -1;

      this.sc.pageNo = 1;
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
